/**
 * 分项分析
 */
import * as React from "react";
import moment from "moment";
import SubItemEleCharts from "./compontents/SubItemEleCharts";
import SubItemEleValBieChars from "./compontents/SubItemEleValBieChars";
import "./index.less";
export interface SubItemAnalysisProps {
  time: number;
  timeType: number;
  dataSouce: any;
}

export interface SubItemAnalysisState {
  timeType: number;
  dataTime: string;
  totalDataList: TotalData[];
  eleTypeDataList: EleTypeData[];
}
//分项用电集合
interface EleTypeData {
  name: string;
  dataList: number[];
}
interface TotalData {
  id: number;
  name: string;
  val: number;
}
class SubItemAnalysis extends React.Component<
  SubItemAnalysisProps,
  SubItemAnalysisState
> {
  state = { timeType: 2, dataTime: "", totalDataList: [], eleTypeDataList: [] };
  render() {
    let { timeType, totalDataList, dataTime, eleTypeDataList } = this.state;
    return (
      <div className="SubItemAnalysis">
        <h2>03&nbsp;&nbsp;分项分析</h2>

        <div className="tit1">{dataTime}分项电量</div>
        {eleTypeDataList.length > 0 ? (
          <SubItemEleCharts type={timeType} dataSouce={eleTypeDataList} />
        ) : (
          <div className="pText">暂无数据</div>
        )}

        <div className="tit1">分项电量构成分析</div>
        {totalDataList.length > 0 ? (
          <>
            <SubItemEleValBieChars dataSouce={totalDataList} />
            <div className="pText">
              电量分析：{dataTime}，
              {totalDataList.map((item: TotalData) => {
                return (
                  <p>
                    {item.name}总量为{item.val}kW·h,
                  </p>
                );
              })}
            </div>
          </>
        ) : (
          <div className="pText">暂无数据</div>
        )}
      </div>
    );
  }
  shouldComponentUpdate(
    newProps: SubItemAnalysisProps,
    newState: SubItemAnalysisState
  ) {
    if (newProps.dataSouce !== this.props.dataSouce) {
      //格式化时间获取（当前，上一单位，去年当前）
      this.FormatDate(newProps.timeType, newProps.time);
      this.getData(newProps.dataSouce);
    }
    return true;
  }
  componentWillMount() {
    this.FormatDate(this.props.timeType, this.props.time);
    this.getData(this.props.dataSouce);
  }
  //获取数据
  getData(data: any) {
    if (data) {
      let { totalDataList, eleTypeDataList } = data;
      this.setState({
        totalDataList,
        eleTypeDataList,
      });
    }
  }
  //格式化时间
  FormatDate(type: number, time: number) {
    let dataTime: string = "";
    switch (type) {
      case 2:
        dataTime = moment(time).format("YYYY年MM月DD日");
        break;
      case 3:
        dataTime = moment(time).format("YYYY年MM月");
        break;
      case 4:
        dataTime = moment(time).format("YYYY年");

        break;
      default:
        break;
    }
    this.setState({ dataTime, timeType: type });
  }
}

export default SubItemAnalysis;
